<template>
  <div class="j-container">
    <div class="j-container__card">
      <div class="j-container__card__item">欢迎登录</div>
      <div class="j-container__card__item">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          size="small"
        >
          <el-form-item prop="account">
            <el-input
              v-model="ruleForm.account"
              placeholder="请输入账号"
              prefix-icon="el-icon-user"
              clearable
              v-on:keyup.native.13="clickSubmitForm('ruleForm')"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="ruleForm.password"
              placeholder="请输入密码"
              show-password
              prefix-icon="el-icon-lock"
              clearable
              v-on:keyup.native.13="clickSubmitForm('ruleForm')"
            ></el-input>
          </el-form-item>
          <el-form-item prop="captcha">
            <el-input
              v-model="ruleForm.captcha"
              placeholder="请输入验证码"
              prefix-icon="el-icon-mobile-phone"
              class="j-container__card__item__code"
              clearable
              v-on:keyup.native.13="clickSubmitForm('ruleForm')"
            ></el-input>
            <el-tooltip
              class="item"
              effect="dark"
              content="看不清？点击刷新"
              placement="bottom"
            >
              <img :src="url" @click="loadCaptcha" />
            </el-tooltip>
          </el-form-item>
          <el-form-item class="j-container__card__item__login">
            <el-button
              type="primary"
              :loading="loading"
              @click="clickSubmitForm('ruleForm')"
              >登 录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="j-container__card__item"></div>
    </div>
    <div class="j-copyright">copyright © 2024 Tom All Rights Reserved.</div>
  </div>
</template>

<script>
import { getCaptcha, login } from "@/api/login/login";

export default {
  name: "LoginView",
  data() {
    const validateAccount = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      }
      callback();
    };
    const validatePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      }
      callback();
    };
    const validateCode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      }
      callback();
    };

    return {
      ruleForm: {
        account: "",
        password: "",
        captcha: "",
        uuid: "",
      },
      rules: {
        account: [{ validator: validateAccount, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
        captcha: [{ validator: validateCode, trigger: "blur" }],
      },
      loading: false,
      url: "",
    };
  },
  created() {
    this.loadCaptcha();
  },
  methods: {
    loadCaptcha() {
      const t = this;
      getCaptcha().then((response) => {
        t.url = response.data.image;
        t.ruleForm.uuid = response.data.uuid;
      });
    },
    clickSubmitForm(formName) {
      const t = this;
      t.$refs[formName].validate((valid) => {
        if (valid) {
          t.loading = true;
          login(t.ruleForm)
            .then((response) => {
              t.loading = false;
              // 设置本地token
              t.$store.commit(
                "token/setToken",
                JSON.stringify({
                  tokenName: response.data.tokenName,
                  tokenValue: response.data.tokenValue,
                })
              );
              t.$router.push("/").catch((err) => err);
            })
            .catch(() => {
              t.loading = false;
              t.loadCaptcha();
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.j-container {
  width: 100%;
  height: 100%;
  opacity: 0.8;
  background: url(@/assets/images/login.png) no-repeat center;
  background-size: cover;
  position: relative;

  .j-container__card {
    display: flex;
    flex-direction: column;
    width: 310px;
    height: 340px;
    position: absolute;
    right: 10%;
    top: 25%;
    background-color: #fff;
    padding: 10px 10px;
    border-radius: 4px;

    .j-container__card__item:nth-child(1) {
      width: 100%;
      height: 100px;
      font-size: 24px;
      font-weight: 300;
      text-align: center;
      line-height: 100px;
    }

    .j-container__card__item:nth-child(2) {
      width: 100%;
      height: 220px;
      box-sizing: border-box;
      padding: 0px 30px;

      .j-container__card__item__code {
        width: 155px;
        margin-right: 10px;
      }

      .j-container__card__item__login {
        margin-top: 30px;

        button {
          width: 100%;
        }
      }

      img {
        width: 85px;
        height: 32px;
        position: absolute;
      }
    }

    .j-container__card__item:nth-child(3) {
      width: 100%;
      height: 20px;
    }
  }

  .j-copyright {
    color: #fff;
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
  }
}
</style>
